<template>
  <div class="cityPage">
    <div class="cityLeft">
      <div class="header headerBlue">智能设施建设</div>
      <div class="intelligen">
        <div class="chartDiv">
          <dv-active-ring-chart
            :config="intelligenConfig"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="legendDiv">
          <div
            v-for="(item, index) of intelligenConfig.data"
            :key="index"
            class="legendItem"
            :class="'legendItem' + (index + 1)"
          >
            <span>{{ item.name }}</span>
            <span>{{ item.value }}</span>
            <span class="rate">{{ item.rate }}</span>
          </div>
        </div>
      </div>
      <div class="header headerGreen">公共道路信息</div>
      <div class="road">
        <div class="roadTop">
          <div class="roadTopItem">
            <div class="left bus"></div>
            <div class="right">
              <p class="title">公交运营车辆数</p>
              <p class="number">2544<span>辆</span></p>
            </div>
          </div>
          <div class="roadTopItem">
            <div class="left bus"></div>
            <div class="right">
              <p class="title">轨道上线列车数</p>
              <p class="number">1052<span>辆</span></p>
            </div>
          </div>
        </div>
        <div class="roadBottom">
          <div class="roadBottomItem">
            <p class="title">国道数量</p>
            <p class="number">6<span>条</span></p>
          </div>
          <div class="roadBottomItem">
            <p class="title">省道数量</p>
            <p class="number">16<span>条</span></p>
          </div>
          <div class="roadBottomItem">
            <p class="title">乡/县道数量</p>
            <p class="number">21<span>条</span></p>
          </div>
        </div>
      </div>
      <div class="header headerRed">重点区域实时客流量</div>
      <div class="passenger">
        <div class="passengerTop">210932</div>
        <div class="passengerBottom">
          <div class="chart">
            <dv-active-ring-chart
              :config="passengerConfig"
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="chartLegend">
            <div
              v-for="(item, index) of passengerConfig.data"
              :key="index"
              class="legendItem"
              :class="'legendItem' + (index + 1)"
            >
              <div class="name">{{ item.name }}</div>
              <div class="rate">{{ item.value }} %</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cityMiddle"></div>
    <div class="cityRight">
      <div class="header headerGreen">环境指数</div>
      <div class="environment">
        <div class="envTop">
          <div v-for="item of environmentList" :key="item.id" class="topItem">
            <div class="itemName">{{ item.name }}</div>
            <div class="itemIcon" :class="'itemIcon' + item.id"></div>
            <div class="itemValue">{{ item.value }}</div>
          </div>
        </div>
        <div class="envBottom">
          <div class="info">
            <span class="number">47</span>
            <span class="grade">优</span>
            <span class="desc">空气很好,可以外出活动,呼吸新鲜空气</span>
          </div>
          <div class="aqiLine"></div>
        </div>
      </div>
      <div class="header headerGreen">未来7天天气</div>
      <div class="weather">
        <div
          v-for="item of weatherList"
          :key="item.id"
          class="weatherItem"
          :class="'weatherItem' + item.id"
        >
          <div class="itemTop">
            <div class="name">{{ item.name }}</div>
            <div :class="'weatherIcon' + item.status" class="weatherIcon"></div>
            <div class="date">{{ item.date }}</div>
          </div>
          <div class="itemBottom">{{ item.grade }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intelligenConfig: {
        data: [
          {
            name: "智能监控",
            value: 30,
            color: "#22C1D9",
            rate: "37%",
          },
          {
            name: "交通信号",
            value: 23,
            color: "#228AD9",
            rate: "28%",
          },
          {
            name: "社区安防",
            value: 12,
            color: "#22D989",
            rate: "15%",
          },
          {
            name: "通信网络",
            value: 16,
            color: "#ffb07e",
            rate: "20%",
          },
        ],
        radius: "70%",
        activeRadius: "80%",
        lineWidth: 25,
        digitalFlopStyle: {
          fontSize: 15,
          fill: "#fff",
        },
        color: ["#22C1D9", "#228AD9", "#22D989", "#ffb07e"],
      },
      passengerConfig: {
        data: [
          {
            name: "40岁以上",
            value: 43,
            color: "#113e85",
          },
          {
            name: "31-40岁",
            value: 31.5,
            color: "#125627",
          },
          {
            name: "21-30岁",
            value: 14.5,
            color: "#a97014",
          },
          {
            name: "20岁以下",
            value: 10.9,
            color: "#a5a5a5",
          },
        ],
        radius: 60,
        activeRadius: 70,
        lineWidth: 30,
        digitalFlopStyle: {
          fontSize: 16,
          fill: "#fff",
        },
        color: ["#113e85", "#125627", "#a97014", "#a5a5a5"],
      },
      environmentList: [
        { id: 1, name: "温度", value: "17-28°C" },
        { id: 2, name: "湿度", value: "45% AH" },
        { id: 3, name: "PM2.5", value: "63 MI" },
        { id: 4, name: "CO2", value: "528 ppm" },
      ],
      weatherList: [
        {
          id: 1,
          name: "昨天",
          status: 1,
          date: "10.31",
          top: "36",
          bottom: "25",
          grade: "优",
        },
        {
          id: 2,
          name: "今天",
          status: 2,
          date: "11.1",
          top: "36",
          bottom: "25",
          grade: "优",
        },
        {
          id: 3,
          name: "明天",
          status: 2,
          date: "11.2",
          top: "36",
          bottom: "25",
          grade: "良",
        },
        {
          id: 4,
          name: "周五",
          status: 3,
          date: "11.3",
          top: "36",
          bottom: "25",
          grade: "优",
        },
        {
          id: 5,
          name: "周六",
          status: 1,
          date: "11.4",
          top: "36",
          bottom: "25",
          grade: "优",
        },
        {
          id: 6,
          name: "周日",
          status: 3,
          date: "11.5",
          top: "36",
          bottom: "25",
          grade: "优",
        },
        {
          id: 7,
          name: "周一",
          status: 1,
          date: "11.6",
          top: "36",
          bottom: "25",
          grade: "优",
        },
      ],
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//cityOverview.scss";
</style>
